const fs = require('fs')
const path = require('path')
const Koa = require('koa')

const compilerSfc  = require('@vue/compiler-sfc')
const compilerDom = require('@vue/compiler-dom')

const app = new Koa()

app.use(async (ctx, next) => {
    const {request:{url}} = ctx
    if(url === '/'){
        ctx.type = 'text/html'
        let content = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8')
        content = content.replace('<script ',`
            <script>
                window.process = {env:{ NODE_ENV:'dev'}}
            </script>
            <script 
        `)
        ctx.body = content
    } 
    else if(url.startsWith('/@modules/')){
        // debugger
        // 这是一个node_module里的东西
        const prefix = path.resolve(__dirname,'node_modules',url.replace('/@modules/',''))
        const module = require(prefix+'/package.json').module
        const p = path.resolve(prefix,module)
        const ret = fs.readFileSync(p,'utf-8')
        ctx.type = 'application/javascript'
        ctx.body = rewriteImport(ret)
    } 
    else if(url.endsWith('.js')){
        // debugger
        const p = path.resolve(__dirname, url.slice(1))
            ctx.type = "application/javascript"
            const content = fs.readFileSync(p,'utf-8')
            // console.log(rewriteImport(content),'content');
            ctx.body =rewriteImport(content)      
        
    }
    else if(url.endsWith('css')){
        const p = path.resolve(__dirname, url.slice(1))
        const file = fs.readFileSync(p,'utf-8')
        // console.log(file);
        // debugger
        const content = `const css = "${file.replace(/\n/g,'')}"
            let link = document.createElement('style')
            link.setAttribute('type', 'text/css')
            document.head.appendChild(link)
            link.innerHTML = css
            export default css
        `;
        console.log(content)
        // debugger
        ctx.type = "application/javascript"
        ctx.body = content
    } 
    else if(url.indexOf('.vue')>-1){
        // debugger
        // vue单文件组件
        const p = path.resolve(__dirname, url.split('?')[0].slice(1))
        const {descriptor} = compilerSfc.parse(fs.readFileSync(p,'utf-8'))

        // console.log(descriptor.script.content,'descriptor');
    
        if(!ctx.query.type){
          ctx.type = 'application/javascript'
          // 借用vue自导的compile框架 解析单文件组件，其实相当于vue-loader做的事情
          ctx.body = `
          // option组件
            ${rewriteImport(descriptor.script.content.replace('export default ','const __script = '))}
            import { render as __render } from "${url}?type=template"
            __script.render = __render
            export default __script
          `
        }

        if(ctx.query.type==='template'){
            // 模板内容
            const template = descriptor.template
            // 要在server端吧compiler做了
            const render = compilerDom.compile(template.content, {mode:"module"}).code
            ctx.type = 'application/javascript'
            // console.log(render,'render')
            ctx.body = rewriteImport(render)
        }
     }
})

// import { createApp } from 'vue' ==> import { createApp } from '/@module/vue'
function rewriteImport(content){
    return content.replace(/from ['"]([^'"]+)['"]/g, function(s0,s1){
      // . ../ /开头的，都是相对路径
      if(s1[0]!=='.'&& s1[1]!=='/'){
        return `from '/@modules/${s1}'`
      }else{
        return s0
      }
    })
}


app.listen(3001, () => {console.log(`server listen at port 3001`)})